<template>
	<view >
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="取消订单" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		<view class="m20 p20 b-rd b-s bg-p f-s-b pt40 pb40"  >
			<view class="f-f-c f1">
				<span class="fb f36">待回收</span>
				<span class="f28 mt20">回收员已接单，请等待上门</span>
			</view>
			<view class="f-f-c-c mr20" @click="delID()">
				<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/cancel.png" style="width: 60rpx;" mode="widthFix"></image>
				<span class="f24 mt20" >取消订单</span>
			</view>
			<!-- <view class="f-f-c-c">
				<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/time_b.png" style="width: 60rpx;" mode="widthFix"></image>
				<span class="f24 mt20">修改时间</span>
			</view> -->
		</view>
		<view class="m20 p20 b-rd b-s">
			<view class="fb b-b pb20">下单信息</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">回收废品</span>
				<span>
					<span class="fb f28"v-for="(item,index) in orderInfo.hsUserWasteVoList">
						{{item.categorizeName}},
					</span>
				</span>
				
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">物品预估总数</span>
				<span class="fb f28">{{orderInfo.expectWeightTal | fixNum}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">预估金额</span>
				<span class="fb f28 cr">￥{{orderInfo.expectAmountTal | fixNum}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">上门时间</span>
				<span class="fb f28"> {{orderInfo.arriveTime}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">预约地址</span>
				<span class="fb f28">
				{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.county}}{{orderInfo.address}}</span>
			</view>
		</view>
		<view class="m20 p20 b-rd b-s">
			<view class="fb b-b pb20">订单信息</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">订单编号</span>
				<span class="fb f28">{{orderInfo.orderNo}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">创建时间</span>
				<span class="fb f28">{{orderInfo.createTime}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">接单时间</span>
				<span class="fb f28">{{orderInfo.takingTime}} </span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">回收人员</span>
				<span class="fb f28">{{orderInfo.contactor}}</span>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					name:'菜狗一号',
					sex:'男',
					birth:'2000.10.10',
					address:'安徽省 合肥市 庐阳区',
					id:null,
				},
				orderInfo:{
					hsUserWasteVoList:[],
				},
			}
		},
		onShow() {
			// uni.hideBackButton()
		},
		mounted() {
			
		},
		onLoad(option){
			if(option.id){
				this.id = option.id
				this.getDetail(this.id)
			}
		},
		methods: {
			
			getDetail(id){
				let that = this
				this.$api.request('get', `appOrder/app/${id}`).then(res => {
				 // console.log(res.data,'res')
				 that.orderInfo = res.data
				 // that.list1 = [res.data.imgUrl]
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			delID(){
				let that = this
				let id = that.id
				console.log('删除')
				this.$api.request('put',`appOrder/app/cancelById`,{id:id}).then(res => {
				  // console.log(res.rows)
				  // this.datalist = res.rows
				   this.$api.msg('取消成功')
				  setTimeout(()=>{
					  uni.navigateBack({delta:  1});
				  },200)
				}).catch(err => {
				  this.$api.msg('请求失败，请稍后再试')
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		// padding-top: 16upx;
		
	}
  
	
</style>
